<template>
    <div>
        <vue-ueditor-wrap :config="myConfig" v-model="content" @ready="ready"></vue-ueditor-wrap>
    </div>
</template>

<script>
    import VueUeditorWrap from 'vue-ueditor-wrap';
    // import userInfoHelper from './token';

    export default {
        name: "elUeditor",
        components: {VueUeditorWrap},
        props: ['value'],
        data() {
            return {
                content: '',
                editor: null,
                myConfig: {
                    // 编辑器不自动被内容撑高
                    autoHeightEnabled: false,
                    // 工具栏是否可以浮动
                    autoFloatEnabled: false,
                    // 关闭自动保存
                    enableAutoSave: true,
                    // 初始容器高度
                    initialFrameHeight: 500,
                    // 初始容器宽度
                    initialFrameWidth: '100%',
                    // 上传文件接口
                    // serverUrl: 'system/ueditor/upload?token=' + userInfoHelper.get().token,
                    // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况
                    UEDITOR_HOME_URL: '/ueditor/',
                    allowDivTransToP: false,
                    disabledTableInTable: false,
                    toolbars: [
                        [
                            'source', //源代码
                            'undo', //撤销
                            'redo', //重做
                            'formatmatch', //格式刷
                            'bold', //加粗
                            'italic', //斜体
                            'underline', //下划线
                            'strikethrough', //删除线
                            'superscript', //上标
                            'subscript', //下标
                            'justifyleft', //居左对齐
                            'justifyright', //居右对齐
                            'justifycenter', //居中对齐
                            'justifyjustify', //两端对齐
                            'rowspacingtop', //段前距
                            'rowspacingbottom', //段后距
                            'lineheight', //行间距
                            'anchor', //锚点
                            'indent', //首行缩进
                            // 'snapscreen', //截图
                            'fontborder', //字符边框
                            'blockquote', //引用
                            'pasteplain', //纯文本粘贴模式
                            'selectall', //全选
                            'horizontal', //分隔线
                            'removeformat', //清除格式
                            'time', //时间
                            'date', //日期
                            'insertcode', //代码语言
                            'inserttable', //插入表格
                            'insertrow', //前插入行
                            'insertcol', //前插入列
                            'mergeright', //右合并单元格
                            'mergedown', //下合并单元格
                            'deleterow', //删除行
                            'deletecol', //删除列
                            'splittorows', //拆分成行
                            'splittocols', //拆分成列
                            'splittocells', //完全拆分单元格
                            'edittable', //表格属性
                            'edittd', //单元格属性
                            'insertparagraphbeforetable', //"表格前插入行"
                            'deletecaption', //删除表格标题
                            'inserttitle', //插入标题
                            'mergecells', //合并多个单元格
                            'deletetable', //删除表格
                            'customstyle', //自定义标题
                            'fontfamily', //字体
                            'fontsize', //字号
                            'paragraph', //段落格式
                            'simpleupload', //单图上传
                            // 'insertvideo', //视频
                            // 'insertimage', //多图上传
                            'unlink', //取消链接
                            'link', //超链接
                            // 'emotion', //表情
                            'spechars', //特殊字符
                            'searchreplace', //查询替换
                            'map', //Baidu地图
                            'gmap', //Google地图
                            'forecolor', //字体颜色
                            'backcolor', //背景色
                            'insertorderedlist', //有序列表
                            'insertunorderedlist', //无序列表
                            'fullscreen', //全屏
                            'directionalityltr', //从左向右输入
                            'directionalityrtl', //从右向左输入
                            'pagebreak', //分页
                            'insertframe', //插入Iframe
                            'imagenone', //默认
                            'imageleft', //左浮动
                            'imageright', //右浮动
                            // 'attachment', //附件
                            'imagecenter', //居中
                            'wordimage', //图片转存
                            'edittip ', //编辑提示
                            'autotypeset', //自动排版
                            // 'webapp', //百度应用
                            'touppercase', //字母大写
                            'tolowercase', //字母小写
                            'background', //背景
                            'template', //模板
                            'scrawl', //涂鸦
                            'music', //音乐
                            'drafts', // 从草稿箱加载
                            // 'charts', // 图表
                            'cleardoc', //清空文档
                            'preview', //预览
                            'print', //打印
                            'help', //帮助
                        ]
                    ],
                }
            }
        },
        watch: {
            value(val) {
                this.content = val;
            },
            content(val) {
                let text = this.editor ? this.editor.getContentTxt() : "";
                this.$emit('change', val, text);
            }
        },
        mounted() {
            this.content = this.value;
        },
        methods: {
            ready(editorInstance) {
                this.editor = editorInstance;
            },
            insertDefineHtml(html) {
                this.editor.execCommand('inserthtml', html);
            }
        }
    }
</script>
